<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		/*
				将js环境下的信息传递到vertex定点shader内部使用，
				主要用到了vertex定点shader的  attribute属性或者uniform变量进行声明 

		*/ 
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")   

		let vertexShader=`
			//创建一个从外部接收的位置信息
			attribute vec2 a_position;
			uniform float u_size;
			void main(){
				gl_Position=vec4(a_position,0.0,1.0);
				gl_PointSize=u_size;
			}
		`;
		let fragementShader=`
			void main(){
				gl_FragColor=vec4(0.0,1.0,1.0,1.0);
			} 
		`;   

		//初始化变量
		initShader(gl,vertexShader,fragementShader);  

		 let active=false;//是否点击了cavnas
		  canvas.addEventListener('mousedown',e=>{ 
	  	  	  if (e.target === canvas) {
	  	  	  	console.log("鼠标点击了canvas",e,e.clientX);
			      active=true;
			  }
		  }, false);
		  canvas.addEventListener('mouseup',e=>{
		 	 active=false;
		  }, false);
		  canvas.addEventListener('mousemove', e=>{
		  	 if (active) {
			     console.log("鼠标点击了移动",e,e.clientX);
			    }
		  }, false);
 		

		//定义清空后的颜色值	
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 	 

		let x=0,y=0,n=1000,r=0.3;
	    for(let i=0;i<n;i++){
	    	//获取shader内部变量
	    	//圆
	    	x=Math.sin(i)*r; 
	    	y=Math.cos(i)*r; 
	    	/* r=i/1000;
	    	x=Math.sin(i)*r;
	    	y=Math.cos(i)*r;*/

	    	//获取路径
		   let a_position=gl.getAttribLocation(gl.program,'a_position');
		   //获取大小
		   let u_size=gl.getUniformLocation(gl.program,'u_size');
			// console.log("获取shader的属性变量",a_position);
			//给shader变量赋值
			//传递数组gl.vertexAttrib2fv gl.vertexAttrib3fv gl.vertexAttrib4fv对应vec3 vec4 
	    	// gl.vertexAttrib2fv(location,new Float32Array(position)); 

			gl.vertexAttrib2f(a_position,x,y); 
			gl.uniform1f(u_size,5); 
			gl.drawArrays(gl.POINTS,0,1);
	    }  

	</script>
</html>